<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>石头剪子布游戏 </title>
    <style type="text/css">            div {
        margin: 20px auto;
        padding: 10px;
        border: 2px solid #999;
        width: 200px;
        background: #ffe;
    }

    div#cu {
        font-weight: bold;
        font-size: 30px;
        height: 40px;
        color: red;
    }

    div#la {
        border: none;
        background: none;
        display: none;
    }

    span {
        color: red;
        font-weight: bold;
    }        </style>
    <script type="text/javascript">            var se = null, time = 20, you = 0, arr = new Array('石头', '抹布', '剪子');

    function p(n) {
        you = n;
        document.getElementById('you').innerHTML = s(n);
        document.getElementById('st').disabled = true;
        document.getElementById('mb').disabled = true;
        document.getElementById('jz').disabled = true;
        document.getElementById('cu').innerHTML = '...';
        se = setInterval('t()', 50);
    }

    function agin() {
        document.getElementById('st').disabled = false;
        document.getElementById('mb').disabled = false;
        document.getElementById('jz').disabled = false;
        document.getElementById('la').style.display = 'none';
        document.getElementById('you').innerHTML = '';
        document.getElementById('pc').innerHTML = '';
        document.getElementById('cu').innerHTML = '';
        document.getElementById('you').innerHTML = '请选择';
    }

    function bt() {
        var pc = Math.floor(Math.random() * 3 + 1);
        document.getElementById('pc').innerHTML = s(pc);
        var str = '';
        if (pc == you) {
            str += '平局';
        } else {
            var b = pc - you;
            if (b > 0) {
                if (b == 1) {
                    str += '电脑赢';
                } else {
                    str += '你赢啦';
                }
            } else {
                b = b * -1;
                if (b == 1) {
                    str += '你赢啦';
                } else {
                    str += '电脑赢';
                }
            }
        }
        document.getElementById('la').style.display = 'block';
        document.getElementById('cu').innerHTML = str;
    }

    function t() {
        if (time > 0) {
            document.getElementById('pc').innerHTML = arr[time % 3];
            time--;
        } else {
            clearInterval(se);
            se = null;
            time = 20;
            bt();
        }
    }

    function s(n) {
        if (n == 1) {
            return '石头';
        } else if (n == 2) {
            return '抹布';
        } else {
            return '剪子';
        }
    }        </script>
</head>
<body>
<div><p>你出什么？<span id="you">请选择</span></p>
    <p>
        <button id="st" onclick="p(1);">石头</button>
    </p>
    <p>
        <button id="mb" onclick="p(2);">抹布</button>
    </p>
    <p>
        <button id="jz" onclick="p(3);">剪子</button>
    </p>
</div>
<div><p>电脑出？</p>            <span style="" id="pc"></span></div>
<div id="cu"></div>
<div id="la">
    <button id="agin" onclick="agin()">再来一次</button>
</div>
</body>
</html>